<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <title>canvas第一列</title>
</head>
<body>
    <canvas id="c1" width="1024" height="768" style="border: solid 1px gray; margin: 10px auto;display: block;"></canvas>
</body>
<script type="text/javascript">
    window.onload = function () {
        var canvas = document.getElementById('c1');
        canvas.width = 600;
        canvas.height = 400;
        var context = canvas.getContext('2d');
        // console.log(context);
        context.moveTo(100,100);
        context.lineTo(300,300);
        context.lineTo(100,300);
        context.lineTo(100,100);

        context.fillStyle = '#330';
        context.fill();
        context.lineWidth = 5
        context.strokeStyle = 'red';
        context.stroke();
        
        context.clearRect(0,0,500,200);
    }
</script>
</html>